<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>核销管理</title>

    <!--<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"/>-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script src="../js/bianliang.js"></script>
    <link rel="stylesheet" href="../css/style.default.css" type="text/css"/>
    <script type="text/javascript" src="../js/general.js"></script>
    <script type="text/javascript" src="../js/blog.js"></script>

    <!--[if lte IE 8]>
    <script language="javascript" type="text/javascript" src="../js/plugins/excanvas.min.js"></script><![endif]-->
    <!--[if IE 9]>
    <link rel="stylesheet" media="screen" href="../css/style.ie9.css"/>
    <![endif]-->
    <!--[if IE 8]>
    <link rel="stylesheet" media="screen" href="../css/style.ie8.css"/>
    <![endif]-->
    <!--[if lt IE 9]>
    <script src="js/plugins/css3-mediaqueries.js"></script>
    <![endif]-->
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            init();
            var doDailyId;//全局变量，作为update(records)的索引id
            var userName;
            var dailyName;
            var result;
            var finalResult;
            var resultName;
            var finalResultName;

            function init() {
                $.ajax({
                    type: "get",
                    url: urlUserCenter + "/clazz/getClazz",
                    dataType: "json",
                    success: function (data) {
                        for (var i in data) {
                            $("#inClazz").append("<option value=" + data[i].id + ">" + data[i].name + "</option>");
                        }
                    },
                    error: function (err) {
                        console.log(err);
                    }
                })
            }

            $("#inClazz").change(function () {
                getUserByClazzId();
            });

            function getUserByClazzId() {
                $("#inUser").empty();//首先清空select现在有的内容
                var clazzId = $("#inClazz").val();
                $.ajax({
                    type: "get",
                    url: urlUserCenter + "/user/getUserByClazzId/" + clazzId,
                    data: {
                        id: clazzId,
                    },
                    dataType: "json",
                    success: function (data) {
                        for (var i in data) {
                            $("#inUser").append("<option value=" + data[i].id + ">" + data[i].name + "</option>");
                        }
                    },
                    error: function (err) {
                        console.log(err);
                    }
                })
            }

            $("#get_shuju").click(function () {
                $("#t1 tr:not(:first)").empty();//首先清空原来有的内容
                var userId = $("#inUser").val();
                var date = $("#user_date").val();
                var doDaily = {
                    userId: userId,
                    date: date
                }
                $.ajax({
                    async: false,     //是否为异步请求
                    cache: false,  //是否缓存结果
                    type: "post",
                    url: "/doDaily/getRecordByDateAndId",
                    data: doDaily,
                    dataType: "json",
                    success: function (data) {
                        initTable(data);
                        var records = data.records;
                        for (var i in records) {
                            if (records[i].result == -1) {
                                resultName = "未完成";
                            } else if (records[i].result == 1) {
                                resultName = "完成";
                            }

                            if (records[i].finalResult == null || records[i].finalResult == 0) {
                                finalResultName = "待定";
                            } else if (records[i].finalResult == -1) {
                                finalResultName = "未完成";
                            } else if (records[i].finalResult == 1) {
                                finalResultName = "完成";
                            }

                            doDailyId = records[i].id;
                            userName = records[i].userName;
                            dailyName = records[i].dailyName;
                            // result = records[i].result;
                            // finalResult = records[i].finalResult;
                            //通过var records 里面元素的 赋值 插入
                            $("#hexiao").append("<tr><td>" + doDailyId + " </td><td>" + userName + " </td><td>" + dailyName + " </td><td>" +
                                resultName + "</td><td>" + finalResultName + "</td><td>" + "<button class='b1' data-toggle='modal' data-target='#myModal'>核销</button>" + "</td></tr>");
                        }

                        $(".b1").click(function () {
                            var id = $(this).parent().parent().find("td").eq(0).text();//拿到该行的id
                            $.ajax({
                                async: false,     //是否为异步请求
                                cache: false,  //是否缓存结果
                                type: "get",
                                url: "/doDaily/updateRecordById/" + id,
                                data: id,
                                dataType: "text",
                                success: function (data) {
                                    if (data == 1) {
                                        alert("核销成功");
                                        location.reload();
                                    }
                                },
                                error: function (xhr, textStatus) {
                                    console.log('错误');
                                    console.log(xhr);
                                    console.log(textStatus);
                                }
                            })
                        })
                    },
                    error: function (xhr, textStatus) {
                        console.log('错误');
                        console.log(xhr);
                        console.log(textStatus);
                    }
                });
            });

        });

    </script>
</head>

<body class="withvernav">
<div class="bodywrapper">
    <div class="topheader">
        <div class="left">
            <h1 class="logo">ZZTY</span></h1>
            <span class="slogan">天行健管理系统</span>


            <br clear="all"/>

        </div><!--left-->

        <div class="right">
            <!--<div class="notification">
                <a class="count" href="ajax/notifications.html"><span>9</span></a>
            </div>-->
            <div class="userinfo">
                <img src="../images/thumbs/avatar.png" alt=""/>
                <span>管理员</span>
            </div><!--userinfo-->

            <div class="userinfodrop">
                <div class="avatar">
                    <a href=""><img src="../images/thumbs/avatarbig.png" alt=""/></a>
                    <div class="changetheme">
                        切换主题: <br/>
                        <a class="default"></a>
                        <a class="blueline"></a>
                        <a class="greenline"></a>
                        <a class="contrast"></a>
                        <a class="custombg"></a>
                    </div>
                </div><!--avatar-->
                <div class="userdata">
                    <h4>管理员</h4>
                    <span class="email">youremail@yourdomain.com</span>
                    <ul>

                        <li><a href="index.html">退出</a></li>
                    </ul>
                </div><!--userdata-->
            </div><!--userinfodrop-->
        </div><!--right-->
    </div><!--topheader-->


    <div class="header">
        <ul class="headermenu">
            <li><a href="Tmain.jsp"><span class="icon icon-flatscreen"></span>首页</a></li>
        </ul>
    </div><!--header-->


    <div class="vernav">
        <ul>
            <li class="current"><a href="map.html" class="editor">首页</a></li>
            <li><a href="daily.html">训练科目</a></li>
            <li><a href="userDaily.html">个人训练科目</a></li>
            <li><a href="car.html">营车停靠点</a></li>
            <li><a href="canteen.html">食堂餐厅</a></li>
            <li><a href="heXiao.html">核销</a></li>
            <li><a href="report.html">报表</a></li>
        </ul>
        <a class="togglemenu"></a>
    </div><!--leftmenu-->
    <div class="centercontent">
        <div class="pageheader">
            <table>
                <tr>
                    <td><h3>Date：</h3></td>
                    <td><input type="date" name="date" id="user_date"/></td>
                </tr>
            </table>
            <br/>

            <h1 class="pagetitle">班级： <select name="clazz" id="inClazz"></select></h1>
            <h1 class="pagetitle">学生：<select name="user" id="inUser"></select></h1>
            <div>
                <h1 class="pagetitle">打卡详情：</h1>
            </div>
            <br>
            <button id="get_shuju">获取数据</button>
            </br>
            <br>
            <div>
                    <table id="hexiao" border="1" style="font-size:18px;font-family:serif;" cellpadding="5">
                        <tr>
                            <th class="head0">id</th>
                            <th class="head1">用户名</th>
                            <th class="head2">日常打卡</th>
                            <th class="head3">完成度</th>
                            <th class="head4">核销完成度</th>
                            <th class="head5">操作</th>
                        </tr>

                        <tr>
                            <td><input type="text" id="f1" style="display: none"></td>
                        </tr>

                    </table>
            </div>
        </div><!--pageheader-->
    </div>
    <div id="contentwrapper" class="contentwrapper">

    </div><!--contentwrapper-->

    <br clear="all"/>

</div><!-- centercontent -->

</div><!--bodywrapper-->

</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">
                    个人核销
                </h4>
            </div>

            <!--模态框主体-->
            <div class="modal-body">
                该记录已核销！
            </div>

            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>

        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<style>

    td {
        text-align: center;
        vertical-align: top;

    }

    input[type="button"] {
        width: auto;
        margin: 0;
        font-weight: bold;
        color: #eee;
        background: #FB9337;
        border: 1px solid #F0882C;
        padding: 7px 10px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        cursor: pointer;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        border-radius: 2px;
    }

    /*.button {*/
    /*background-color: #FB9337;*/
    /*border: none;*/
    /*color: white;*/
    /*padding: 15px 32px;*/
    /*text-align: right;*/
    /*text-decoration: none;*/
    /*display: inline-block;*/
    /*font-size: 15px;*/
    /*margin: 4px 2px;*/
    /*cursor: pointer;*/
    /*}*/
    .right {
        position: absolute;
        right: 35%;
        top: 5%;
        height: 50px;
        width: 50px;

    }
</style>

</body>
</html>